import logo from './logo.svg';
import './App.css';
import Scroll from './component/Scroll';
import BScroll from "better-scroll"
import Header  from './component/Header';
import Main from './component/Main';
import 'react-vant/es/styles';
import axios  from 'axios';
import React, { Component } from 'react'


export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
       tablist:[],
       active:0
    }
  }
  componentDidMount() { 
    axios.get("/tablist").then(res=>{  
      this.setState({
      tablist:res.data
      },()=>{
      this.bs=new BScroll('.main')
      })     
  })
   }
   componentDidUpdate(){
    this.bs&&this.bs.refresh()
    
}
componentWillUnmount(){
    this.bs&&this.bs.destroy()

}
   change=(index)=>{ 
     this.setState({
       active:index
     })
   }
  

  render() {
    const {tablist,active,}=this.state
    return (
      <div className='App'> 
      <Header list={tablist} active={active} change={this.change}></Header>
      <Main tablist={tablist[active] ? tablist[active].child :[] } ></Main></div>
    )
  }
}

export default App
// function App() {
  
//   return (
//     <div className="App">
//       {/* <Scroll color="#f90" background="#ccc"></Scroll> */}
    
      
//     </div>
//   );
// }

// export default App;
